@charset "utf-8";
@import url('../base/base.css');
@import url('../base/grid.css');
html,body{overflow: inherit;font-family:sans-serif,Arial,"Microsoft YaHei","Segoe UI","Lucida Grande";color: #24292e;font-weight: 400;}
/* 按钮 */
.comm-btn{white-space: nowrap;display: inline-block;font-weight: 300;height:30px;line-height:30px;padding: 0 10px;background: #fff; border-radius:3px; letter-spacing: .025em; color: #242526; text-decoration: none; border: 1px solid rgba(0,0,0,0.1); cursor: pointer;}
.comm-btn:hover{text-decoration: none;background: #f2f2f2}
.comm-btn.primary{ background: #09bb07; color: #fff;}
.comm-btn.primary:hover{ background: #37c637; color: #fff;}
.comm-btn.warn{ background: #ff5d34; color: #fff;}
.comm-btn.warn:hover{ background: #eb6966;color: #fff;}
/* 幻灯片 */
.banner{position: relative;}
.banner img{width:100%;}
/*头部*/
#header{padding:20px 0px;z-index:20;width: 100%;background: transparent;background: #FFF}
#header .logo{width:178px;height:50px;margin-top: 5px;}
#header .logo img{width: 100%;}
#header .nav{display: block;line-height:30px;padding: 10px 0px}
#header .nav > li {position: relative;float: left;padding:3px 15px;}
#header .nav > li.active,header .nav > li:hover {color: #ee591f !important;border-radius: 3px;}
#header .nav > li.active > a,header .nav > li:hover > a {color: #ee591f;}
#header .nav > li >a {font-size: 16px;vertical-align: top;color: #474E60}
#header .btn{padding: 10px 0px;font-size: 14px;}
#header .reg{position: relative;display: inline-block;}
#header .btn .comm-btn:first-child{margin-left:0px;}
#header .btn i {animation:tips 0.6s ease infinite;}
@keyframes tips {0% { -webkit-transform: translateY(0);}50%{ -webkit-transform: translateY(2px);}100%{ -webkit-transform: translateY(0);}}
#header .btn i{z-index:100;background: #fff;color: #09BB07;border: 1px solid #09BB07;position: absolute;font-size: 13px;font-style: normal;left: 50%;margin-left: -114px;top:40px;line-height: 22px;padding: 0 8px;border-radius: 3px;white-space: nowrap;}
#header .btn i:after,header .btn i:before {content: "";display: block;position: absolute;left: 106px;border: 8px solid;border-color: transparent transparent #09BB07 transparent;top: -16px;}
#header .btn i:before{border-bottom-color: #fff;top: -15px;z-index: 1;}
/* 预览 */
.preview{background: #8BC34A;height:450px;}
/* 标题 */
.sub-tit{width: 100%;}
.sub-tit img{width: 100%;}
/*应用中心*/
.app{display: block;overflow: hidden;position: relative;}
.app .lookapp{position: absolute;left: 0;bottom: 0;right: 0px;background: linear-gradient(rgba(250,250,250,0),rgba(250,250,250,1));display: none;padding-bottom:20px;}
.app .view_pic{overflow: hidden;}
.app .view_pic img{width: 100%;transform: scale(1);transition:all 0.6s;}
.app h2{font-size:18px;line-height:30px;font-weight:600;color: #444;margin-top: 10px;}
.app p{line-height:22px;color: #969696;font-size:14px;}
.app:hover .view_pic img{transform: scale(1.1);transition:all 0.3s;}
.app:hover .lookapp{display:block;}
/* 应用预览 */
.review{border-bottom: 3px solid #f5f5f5;}
.review h1{font-size:30px;font-weight: 400;line-height:60px;}
.review  .gray{color: #888;padding-left: 10px;}
.content img{width:100%;}
/*提供的服务*/
.footer_service{padding: 60px 0;background-color: #F5F8FD;}
.footer_service li{float: left;width:275px;}
.footer_service li i{ float: left; width: 50px; height: 50px; background: url(bottom-icon.png) no-repeat;}
.footer_service li.item-1 i{ background-position: 0 0; }
.footer_service li.item-2 i{ background-position: -60px 0; }
.footer_service li.item-3 i{ background-position: -120px 0; }
.footer_service li.item-4 i{ background-position: -180px 0; }
.footer_service li .text{ padding-left: 70px; }
.footer_service li .text .h3{ font-size: 18px;}
.footer_service li .text .h4{color: #5c6166; }
/* 版权 */
/* 底部信息 */
#info{min-width:1100px;background: #0076EB;padding:40px 0px;text-align: center;font-size: 1.875rem;color: #FFF;font-weight: 400;}
#info .btn{border: 1px #FFF solid;color: #fff;padding: 10px;padding: 10px 20px;font-size: 18px;margin-left: 100px;border-radius: 2px;vertical-align: middle;}
#info:hover .btn{background: #FFF;color: #333}
/* 版权 */
#footer{min-width:1100px;clear: both;color: #5f6369;font-size: 14px;line-height: 25px}
#footer a{color: #5f6369;}
#footer .copyright{padding: 10px;line-height:25px;}
#footer .footer__copyright-icp-logo{height: 20px;width: 20px;vertical-align: middle;margin-right: 5px;}
#footer .footer__copyright-logo-img{width:140px;vertical-align: middle;margin-right: 5px;}
/* 布局 */
@media screen and (min-width:759px){
    .apps{margin: 40px -30px 20px 0;}
    .app{margin:0px 20px 20px 0px;}
     /* 预览 */
    .body{background: #FFF;margin:20px auto;}
    .body .review{padding:20px 50px;}
    .body .review .gray{font-size:20px;}
    .body .content{padding:20px 50px;}
}
@media screen and (max-width:760px){
    /* 预览 */
    .body{background: #FFF;}
    .body h1 {font-size: 20px;}
    .body .review{padding:0px;}
    .body .review .gray{font-size:16px;}
    .body .content{padding:0px;}

    header {padding:5px 0px;}
    header .logo img {width:80%;}
    header .btn {font-size: 14px;}
    header .btn i{display: none}
    /* 底部服务 */
    .footer_service{padding:10px 30px}
    .footer_service li{width: 100%;padding: 10px;} 
    .footer_service li .text{ padding-left: 70px; }
    .footer_service li .text .h3{ font-size: 16px;}
    .tit {padding:10px 0px;}
    .app{margin:10px 10px 5px 10px;}
    .review{text-align: center}
    .review img{width:100%;}
    #footer{min-width:100%;}
    #footer .copyright{line-height:25px;}
    .comm-btn{padding: 0 5px;line-height:30px;height:30px;}
}